<template>
    <div class="container">
        <div class="body">
            <router-view></router-view>
        </div>
        <div class="sub-menu" >
            <div class="menu" 
                v-for="item,index in menuList" 
                :key="index"
                :class="{activate: item.path == activateMenu  }"
                @click="navigatorTo(item)">
                    <i class="iconfont" :class="[item.icon]"></i>
                    <div class="name">{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            menuList: [
                {
                    name: "气体检测",
                    path: 'homeqiti',
                    icon: 'icon-yujing',
                    activateIcon: 'icon-yujing-copy'
                },
                {
                    name: "资讯",
                    path: 'zixun',
                    icon: 'icon-zixun',
                    activateIcon: 'icon-zixun-copy'
                },
                {
                    name: "关于我们",
                    path: 'about',
                    icon: 'icon-louyu',
                    activateIcon: 'icon-louyu-copy'
                },
            ],
            activateMenu: '',
        }
    },
    beforeMount() {
        this.activateMenu = this.$route.query.activateMenu || 'homeqiti'
    },
    methods: {
        navigatorTo(item) {
            this.activateMenu = item.path;
            this.$router.push({
                path: item.path,
                query: {
                    deptId: this.$route.query.deptId,
                    activateMenu: item.path
                }
            })
        }
    }
}
</script>

<style scoped>
.container {
    height: 100vh;
    width: 100%;
    background-color: white;
}
.container::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.container .body {
    /* margin-bottom: 50px; */
}
.sub-menu {
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* padding: 16px 0; */
    height: 62px;
    position: fixed;
    bottom: 0;
    border-top: 0.5px solid #eeeeee;
    border-bottom: 0.5px solid #eeeeee;
}

.sub-menu .menu {
    height: 100%;
    flex: 1;
    text-align: center;
    border-right: 0.5px solid #eeeeee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sub-menu .menu i {
    color: #99B1C9;
    font-size: 22px;
    margin-bottom: 4px;
}
.sub-menu .menu.activate i {
    color: #00407E;
}
.sub-menu .menu .name {
    font-size: 12px;
    color: #000;
}
.sub-menu .menu.activate {
    /* background-color: #eeeeee; */
}
</style>